import {useState} from "react";
import {Button} from "antd-mobile";
import {AddOutline} from "antd-mobile-icons";

import TripItem from "@/components/TripItem";

const Trips = (props) => {
    const [state, setState] = useState([{
        key: 0,
        value: 0
    }]);
    // 增加行程
    const handleAddTrip = () => {
        const length = state.length;
        setState([...state, {
            key: state[length-1].key + 1,
            value: state[length-1].key + 1
        }])
        console.log(state)
    }
    // 删除行程
    const handleDeleteTrip = (index) => {
        let items = state.slice();
        items.splice(index, 1);
        setState(items);
    }

    return (
       <>
           {state.map((item,index) => (
               <TripItem key={item.key} id={index} onDeleteTrip={handleDeleteTrip} showDelete={state.length > 1}></TripItem>
           ))}
           <Button size="small" block={true} fill="none" style={{
               '--text-color': "#1677FF"
           }} onClick={handleAddTrip}><AddOutline />增加行程</Button>
       </>
    );
}

export default Trips;